import React, {FC, FunctionComponent, ReactElement, useEffect} from "react";
import {useRecoilSnapshot} from "recoil";

function DebugObserver(): ReactElement {
  const snapshot = useRecoilSnapshot();
  useEffect(() => {
    console.debug('The following atoms were modified:');
    for (const node of snapshot.getNodes_UNSTABLE({isModified: true})) {
      console.debug(node.key, snapshot.getLoadable(node));
    }
  }, [snapshot]);

  return <></>;
}

export default DebugObserver